import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import FundDetailHeader from './header';
import FundDetailTread from './trend';
import FundDetailHistoricalNetValue from './historicalNetValue';
import FundDetailIndex from './fundIndex';
import FundDetailOverView from './overview';
import FundDetailObservationPool from './observationPool';
import './index.scss'
import { Tab, Tabs, Toast } from '@antmjs/vantui';
import { getFundPoolDetail, submitFundFeedback } from '@/services/api/fund';

class FundDetail extends Component {

    config = {
        navigationBarTitleText: ''
    }

    state = {
        fundId: '',
        detailData: {},
        pageVverflowHidden: false,
        /// 1-可反馈，2-已反馈，3-无需反馈
        canFeedback: 3,

    }

    $instance = getCurrentInstance()

    componentWillMount() {
        var params: any = this.$instance.router?.params
        console.log(params)
        if (params && params['fundId'].length > 0) {
            this.setState({ fundId: params['fundId'] })
            this.getProductDetail(params['fundId'])
        }
    }
    componentDidMount() { }
    componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }

    /**
     * 请求产品详情
     * @param fundId 
     */
    getProductDetail(fundId) {
        console.log(Number(fundId))
        getFundPoolDetail(fundId).then((resp) => {
            if (resp.code === 200) {
                this.setState({ detailData: resp.data })
            }
        });
    }

    menuOpenChange(menuOpen) {
        this.setState({ pageVverflowHidden: menuOpen })
    }

    /**
     * 催更净值
     */
    urgeChange() {
        const { detailData } = this.state
        var feedback_type = 2;
        var fund_code = detailData['fundCode'];
        var fund_name = detailData['fundName'];
        submitFundFeedback({ feedback_type, fund_code, fund_name }).then((resp) => {
            if (resp.code === 200) {
                Toast.show('反馈成功')
                this.setState({ canFeedback: 2 })
            }
        });
    }

    gotoAsk(){
        Taro.navigateTo({url:"/consultQrCode/index"})
     }

    render() {
        const { detailData, fundId, pageVverflowHidden, canFeedback } = this.state
        const { safeArea } = Taro.getSystemInfoSync();
        return (
            <View className='detail-page'>
                <View className={`page  ${pageVverflowHidden ? 'page-hidden' : ''}`} >
                    <FundDetailHeader detailData={detailData} className='page-item'></FundDetailHeader>
                    <View className='page-item'>
                        <Tabs >
                            <Tab title='业绩走势'>
                                <FundDetailTread fundId={fundId} menuOpenChange={(e) => {
                                    this.menuOpenChange(e)
                                }} canFeedbackChange={(e) => {
                                    this.setState({ canFeedback: e })
                                }}></FundDetailTread>
                            </Tab>
                        </Tabs>
                        <View className={`urge-change ${canFeedback === 2 ? 'urge-change-done' : (canFeedback === 3 ? 'urge-change-hidden' : '')}`} onClick={this.urgeChange.bind(this)}>{canFeedback === 1 ? '催更净值' : (canFeedback === 2 ? '已催更' : '')}</View>
                    </View>
                    <View className='page-item'>
                        <Tabs  >
                            <Tab title='历史净值'>
                                <FundDetailHistoricalNetValue fundId={fundId}></FundDetailHistoricalNetValue>
                            </Tab>
                            <Tab title='产品指标'>
                                <FundDetailIndex detailData={detailData}></FundDetailIndex>
                            </Tab>
                        </Tabs>
                    </View>
                    <View className='page-item'>
                        <Tabs  >
                            <Tab title='概况'>
                                <FundDetailOverView detailData={detailData}></FundDetailOverView>
                            </Tab>
                        </Tabs>

                    </View>
                    <View className='page-item'>
                        <FundDetailObservationPool detailData={detailData}></FundDetailObservationPool>
                    </View>
                    <Toast />
                </View>
                <View className='bottom' style={{ paddingBottom: safeArea.top + 16 }}>
                    <Button className='ask-kf' onClick={this.gotoAsk.bind(this)}>立即咨询</Button>
                </View>
            </View>

        );
    }
}

export default FundDetail;